<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>vue基础语法2</title>
  <style>
    table {
      border-collapse: collapse;
      border: 3px solid #ddd;
      text-align: center;
      width: 600px;
    }

    td {
      border: 1px solid #ddd;
    }
  </style>
  <!--1. 引入vue库-->
  <script src="../vue.js"></script>
</head>
<body>
<div id="d">

  <h1>1. v-if基本用法
    <hr color="red" size="5">
  </h1>
  <!-- 绑定分数 -->
  <p><input v-model="score"/></p>
  <!--1. v-if基本用法-->
  <span v-if="score > 90">优秀</span>
  <span v-else-if="score > 80">良好</span>
  <span v-else-if="score > 70">一般</span>
  <span v-else-if="score > 60">及格</span>
  <span v-else>不及格</span>
  <h1>2. v-if与v-show的区别 【面试题】
    <hr color="red" size="5">
  </h1>
  <button @click="show = !show">切换</button>
  <!--v-if隐藏时将原来的层删除掉，而v-show只是使用了display:none隐藏原来的层，所以，-->
  <!--前者在创建层与删除层之间切换，性能较低，而后者，只是在显示层与隐藏层之间切换，性能-->
  <!--较高！-->
  <div v-if="show">v-if显示</div>
  <div v-show="show">v-show显示</div>
  <h1>3. v-for用法
    <hr color="red" size="5">
  </h1>
  <table>
    <tr height="35">
      <td>商品编号</td>
      <td>商品名称</td>
      <td>单价</td>
      <td>库存量</td>
      <td>操作</td>
    </tr>
    <tr v-for="p in productList" :key="p.pid" v-if="p.price >= 5000">
      <td>{{p.pid}}</td>
      <td>{{p.pname}}</td>
      <td>{{p.price}}</td>
      <td>{{p.quantity}}</td>
      <td>
        <button>修改</button>
        <button>删除</button>
      </td>
    </tr>
  </table>
</div>
</body>
</html>
<script>
  let vs = new Vue({
    el: '#d',
    data: {
      show: true,
      score: 67,
      productList: []
    },
    created() {
      this.init()
    },
    methods: {
      // 1. 初始化商品数据：
      init() {
        console.log("init。。。")
        this.productList.push({"pid": 1001, "pname": "飘柔洗发水", "price": 40, "quantity": 20, "num": 0})
        this.productList.push({"pid": 1002, "pname": "ThinkPad X1电脑", "price": 12000, "quantity": 5, "num": 0})
        this.productList.push({"pid": 1003, "pname": "格力空调", "price": 5000, "quantity": 12, "num": 0})
        this.productList.push({"pid": 1004, "pname": "小米手机", "price": 3500, "quantity": 15, "num": 0})
        this.productList.push({"pid": 1005, "pname": "七匹狼外套", "price": 1200, "quantity": 10, "num": 0})
        this.productList.push({"pid": 1006, "pname": "华为电脑", "price": 10000, "quantity": 6, "num": 0})
        this.productList.push({"pid": 1007, "pname": "联想电脑", "price": 8000, "quantity": 10, "num": 0})
        this.productList.push({"pid": 1008, "pname": "HP电脑", "price": 8500, "quantity": 9, "num": 0})
        this.productList.push({"pid": 1009, "pname": "ViVO手机", "price": 2800, "quantity": 8, "num": 0})
        this.productList.push({"pid": 1010, "pname": "美的空调", "price": 4300, "quantity": 25, "num": 0})
      }
    },

  })
</script>
